<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>面试管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
</head>
<body>
    <div th:replace="common/header :: header"></div>

    <div class="container mt-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">面试管理</h5>
                <button class="btn btn-primary" onclick="location.href='/interview/add'">
                    <i class="bi bi-plus"></i> 新增面试
                </button>
            </div>
            <div class="card-body">
                <!-- 搜索表单 -->
                <form class="row g-3 mb-4" method="get" action="/interview/list">
                    <div class="col-md-3">
                        <input type="text" class="form-control" name="realName" th:value="${param.realName}" placeholder="候选人姓名">
                    </div>
                    <div class="col-md-3">
                        <select class="form-select" name="jobId">
                            <option value="">选择职位</option>
                            <option th:each="job : ${jobs}" 
                                    th:value="${job.id}" 
                                    th:text="${job.title}"
                                    th:selected="${param.jobId != null and param.jobId[0] == job.id.toString()}">
                            </option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select class="form-select" name="status">
                            <option value="">选择状态</option>
                            <option value="1" th:selected="${param.status != null and param.status[0] == '1'}">待面试</option>
                            <option value="2" th:selected="${param.status != null and param.status[0] == '2'}">已通过</option>
                            <option value="3" th:selected="${param.status != null and param.status[0] == '3'}">未通过</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-search"></i> 搜索
                        </button>
                        <button type="button" class="btn btn-secondary" onclick="resetForm()">
                            <i class="bi bi-arrow-counterclockwise"></i> 重置
                        </button>
                    </div>
                </form>

                <!-- 面试列表 -->
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>候选人</th>
                                <th>应聘职位</th>
                                <th>面试官</th>
                                <th>面试时间</th>
                                <th>面试地点</th>
                                <th>面试类型</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="interview : ${interviews}">
                                <td th:text="${interview.resume.user.realName}"></td>
                                <td th:text="${interview.resume.job.title}"></td>
                                <td th:text="${interview.interviewer}"></td>
                                <td th:text="${#temporals.format(interview.interviewTime, 'yyyy-MM-dd HH:mm')}"></td>
                                <td th:text="${interview.location}"></td>
                                <td th:text="${interview.type == 1 ? '初试' : '复试'}"></td>
                                <td>
                                    <span th:if="${interview.status == 1}" class="badge bg-warning">待面试</span>
                                    <span th:if="${interview.status == 2}" class="badge bg-success">已通过</span>
                                    <span th:if="${interview.status == 3}" class="badge bg-danger">未通过</span>
                                </td>
                                <td>
                                    <button class="btn btn-sm btn-info" th:onclick="'viewInterview(' + ${interview.id} + ')'">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                    <button class="btn btn-sm btn-primary" th:onclick="'editInterview(' + ${interview.id} + ')'">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <button class="btn btn-sm btn-danger" th:onclick="'deleteInterview(' + ${interview.id} + ')'">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 分页 -->
                <nav th:if="${totalPages > 1}">
                    <ul class="pagination justify-content-center">
                        <li class="page-item" th:classappend="${currentPage == 1} ? 'disabled'">
                            <a class="page-link" th:href="@{/interview/list(page=${currentPage - 1})}">上一页</a>
                        </li>
                        <li class="page-item" th:each="i : ${#numbers.sequence(1, totalPages)}"
                            th:classappend="${i == currentPage} ? 'active'">
                            <a class="page-link" th:href="@{/interview/list(page=${i})}" th:text="${i}"></a>
                        </li>
                        <li class="page-item" th:classappend="${currentPage == totalPages} ? 'disabled'">
                            <a class="page-link" th:href="@{/interview/list(page=${currentPage + 1})}">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- 面试详情模态框 -->
    <div class="modal fade" id="interviewDetailModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">面试详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">候选人</label>
                            <p id="detailRealName" class="form-control-plaintext"></p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">应聘职位</label>
                            <p id="detailJobTitle" class="form-control-plaintext"></p>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">面试官</label>
                            <p id="detailInterviewer" class="form-control-plaintext"></p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">面试时间</label>
                            <p id="detailInterviewTime" class="form-control-plaintext"></p>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">面试地点</label>
                            <p id="detailLocation" class="form-control-plaintext"></p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">面试类型</label>
                            <p id="detailType" class="form-control-plaintext"></p>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">状态</label>
                            <p id="detailStatus" class="form-control-plaintext"></p>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">面试反馈</label>
                        <p id="detailFeedback" class="form-control-plaintext"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // 查看面试详情
        function viewInterview(id) {
            axios.get('/interview/' + id)
                .then(response => {
                    const interview = response.data;
                    document.getElementById('detailRealName').textContent = interview.resume.user.realName;
                    document.getElementById('detailJobTitle').textContent = interview.resume.job.title;
                    document.getElementById('detailInterviewer').textContent = interview.interviewer;
                    document.getElementById('detailInterviewTime').textContent = 
                        new Date(interview.interviewTime).toLocaleString();
                    document.getElementById('detailLocation').textContent = interview.location;
                    document.getElementById('detailType').textContent = 
                        interview.type === 1 ? '初试' : '复试';
                    document.getElementById('detailStatus').textContent = 
                        interview.status === 1 ? '待面试' : 
                        interview.status === 2 ? '已通过' : '未通过';
                    document.getElementById('detailFeedback').textContent = 
                        interview.feedback || '暂无反馈';
                    new bootstrap.Modal(document.getElementById('interviewDetailModal')).show();
                })
                .catch(error => {
                    alert('获取面试详情失败');
                });
        }

        // 编辑面试
        function editInterview(id) {
            location.href = '/interview/edit/' + id;
        }

        // 删除面试
        function deleteInterview(id) {
            if (confirm('确定要删除这个面试记录吗？')) {
                axios.delete('/interview/' + id)
                    .then(response => {
                        alert('删除成功');
                        location.reload();
                    })
                    .catch(error => {
                        alert('删除失败');
                    });
            }
        }

        // 重置搜索表单
        function resetForm() {
            document.querySelector('form').reset();
            location.href = '/interview/list';
        }
    </script>
</body>
</html> 